<style>
  html,
  body,
  #storybook-root,
  #sigma-container {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-family: sans-serif;
  }
  #controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffffffcc;
    padding: 10px;
  }

  input[type="number"] {
    width: 5em;
  }
  h4 {
    margin: 0;
  }
  fieldset {
    border: none;
  }
  h4,
  fieldset > div {
    margin-bottom: 0.2em;
  }
  button {
    margin-right: 0.1em;
    display: inline-block;
    text-align: center;
    background: white;
    outline: none;
    border: 1px solid dimgrey;
    border-radius: 2px;
    cursor: pointer;
  }
</style>
<div id="sigma-container"></div>
<form id="controls" action="#">
  <fieldset>
    <h4>Interactions</h4>
    <div>
      <input type="checkbox" id="enable-panning" name="enable-panning" checked />
      <label for="enable-panning">Enable panning</label>
    </div>
    <div>
      <input type="checkbox" id="enable-zooming" name="enable-zooming" checked />
      <label for="enable-zooming">Enable zooming</label>
    </div>
    <div>
      <input type="checkbox" id="enable-rotation" name="enable-rotation" checked />
      <label for="enable-rotation">Enable camera rotations <br /><small>(for multitouch device only)</small></label>
    </div>
  </fieldset>
  <fieldset>
    <h4>Camera</h4>
    <div>
      <input type="number" id="min-ratio" name="min-ratio" value="0.08" min="0.001" step="0.001" />
      <label for="min-ratio">Minimum camera zoom ratio <br /><small>(leave empty for no limit)</small></label>
    </div>
    <div>
      <input type="number" id="max-ratio" name="max-ratio" value="3" min="0.001" step="0.001" />
      <label for="max-ratio">Maximum camera zoom ratio <br /><small>(leave empty for no limit)</small></label>
    </div>
    <div>
      <input type="checkbox" id="is-camera-bound" name="is-camera-bound" checked />
      <label for="is-camera-bound">Bound camera</label>
    </div>
    <div>
      <input type="number" id="tolerance" name="tolerance" min="0" step="1" value="500" />
      <label for="tolerance">Tolerance (in pixels)</label>
    </div>
  </fieldset>
  <fieldset>
    <button type="submit" disabled>Update sigma settings</button>
  </fieldset>
</form>
